<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <link rel="stylesheet" href="../css/base.css">
    <title>登录</title>
</head>

<body>
    <div id="app">
        <div class="formbox">
            <el-form :inline="true" :model="formInline" class="login-form">
                <h1 class="login-title">登录</h1>
                <el-form-item label>
                    <el-input ref="nameInput" type="text" v-model="formInline.formInline.login_name" placeholder="请输入账号" class="Ipt">
                        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
                    </el-input>
                </el-form-item>

                <el-form-item label>
                    <el-input ref="passwordInput" type="password" v-model="formInline.formInline.password" placeholder="请输入密码"
                        show-password class="Ipt">
                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button id="login-button" type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            formInline: {
                formInline: {
                    login_name: '',
                    password: ''
                }
            }
        },
        created() {
        },
        methods: {
            login(){
                let index = loading(this);
                postBody("/admin/api/UserController/login", this.formInline.formInline, function(res) {
                    index.close();
                    if (res.code == 0) {
                        vm.$message(res.msg);
                    } else {
                        let token = res.data.token;
                        localStorage.setItem("token", token);
                        localStorage.setItem("user", JSON.stringify(res.data));
                        document.location.href = "/admin/html/module/shuiwu/gongzhonghao/html/children/biaohao_input1.html";
                    }
                })
            }
        },

    })
</script>
<style type="text/css">
    #app {
        background: url('../images/nature-9.jpg') no-repeat;
        width: 100%;
        height: calc(100vh);
        background-position: 100%;
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
    }

    .login-input {
        display: flex;
        flex: 1;
    }

    .el-input__icon {
        font-size: 20px;
    }

    .login-form {
        border-radius: 10px;
        margin: 0px auto;
        width: 400px;
        padding: 30px 35px 15px 35px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.5);
        text-align: left;
        box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.5);
    }

    .login-title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    #login-button,
    .Ipt {
        width: 400px;
    }
</style>

</html>